<template>
  <el-dialog title="新增目录" :visible="showDialog" @close="btnCancel">
    <el-form ref="addForm" :model="formData" :rules="rules" label-width="100px">
      <el-form-item prop="subjectID" label="所属学科">
        <el-select v-model="formData.subjectID" style="width:80%" placeholder="请输入学科名称">
          <el-option
            v-for="(item, index) in subjectIDOptions"
            :key="index"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="directoryName">
        <el-input v-model="formData.directoryName" style="width:80%" placeholder="请输入目录名称" />
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template v-slot:footer>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnCancel">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>

</template>

<script>
// 导入所属学科
import { simple as subjectList } from '../../../api/hmmm/subjects'
import { add as directorysAdd } from '../../../api/hmmm/directorys.js'

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      subjectIDOptions: [], // 下拉列表
      formData: {
        subjectID: '',
        directoryName: ''
      },
      rules: {
        subjectID: [{ required: true, message: '科目名称不能为空', trigger: 'blur' }],
        directoryName: [{ required: true, message: '目录名称不能为空', trigger: 'blur' }]
      }
    }
  },
  //   async created() {
  //     if (this.query.subjectID) {
  //       this.form.subjectID = parseInt(this.query.subjectID)
  //     }
  //     const res = await subjectList()
  //     this.subjectIDOptions = res.data
  //     // console.log(res)
  //   },
  created() {
    this.getsubjectList()
  },
  methods: {
    btnCancel() {
      this.$refs.addForm.resetFields() // 重置校验结果
      this.$emit('update:showDialog', false)
    },
    async btnOK() {
      try {
        await this.$refs.addForm.validate()
        await directorysAdd(this.formData)
        this.$message.success('新增目录成功')
        this.$parent.list()
        this.$parent.showDialog = false // 关闭弹层
      } catch (error) {
        console.log(error)
      }
    },
    // 获取学科名称
    async getsubjectList() {
      const res = await subjectList()
      console.log(res)
      this.subjectIDOptions = res.data
    }
  }
}
</script>

<style>

</style>
